<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活跃留存分析</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .main-container {
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
        .report-container {
            width: 720px;
            margin-bottom: 20px;
            margin-right: 20px;
            display: inline-block;
            float:left;
        }
        .report-content {
            padding: 20px;
            width: 600px;
            height: 400px;
            position: relative
        }
        .custom-content .search-bar {
            box-sizing: border-box;
            padding: 20px;
        }
    </style>
</head>
<body style="display: none;">
<div id="app" class="container" flex>
    <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>活跃留存分析</div>
            </div>
            <div flex-box="1">
                <div class="main-container">
                    <!-- 公众号月留存率 -->
                    <div class="report-container">
                        <el-section-pannel title="公众号月留存率" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="monthStart"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="开始月">
                                </el-date-picker>
                                至
                                <el-date-picker
                                        v-model="monthEnd"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="结束月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div>
                                    <div style="height: 440px;width:100%">
                                        <el-table
                                                :data="publicRetainMonthReportService"
                                                height="440"
                                                style="width: 100%">
                                            <el-table-column
                                                    fixed
                                                    prop="month"
                                                    label="来源月份"
                                                    width="150">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="dataList[0].retention"
                                                    label="1个月后">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="dataList[1].retention"
                                                    label="2个月后">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="dataList[2].retention"
                                                    label="3个月后">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="dataList[5].retention"
                                                    label="6个月后">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="dataList[8].retention"
                                                    label="9个月后">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="dataList[11].retention"
                                                    label="12个月后">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!-- 公众号月留存率柱图 -->
                    <div class="report-container">
                        <el-section-pannel title="公众号月留存率" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="publicRetainMonthReportService_zhu_month"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="来源月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="publicRetainMonthReportService_zhu" :options="publicRetainMonthReportService_zhu" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--社群月留存率-->
                    <div class="report-container">
                        <el-section-pannel title="社群月留存率" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="wechatRetainMonthReportService_monthStart"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="开始月">
                                </el-date-picker>
                                至
                                <el-date-picker
                                        v-model="wechatRetainMonthReportService_monthEnd"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="结束月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <el-table
                                        :data="wechatRetainMonthReportService"
                                        stripe
                                        height="440"
                                        style="width: 100%">
                                    <el-table-column
                                            fixed
                                            prop="month"
                                            label="来源月份"
                                            width="150">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dataList[0].retention"
                                            label="1个月后">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dataList[1].retention"
                                            label="2个月后">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dataList[2].retention"
                                            label="3个月后">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dataList[5].retention"
                                            label="6个月后">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dataList[8].retention"
                                            label="9个月后">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dataList[11].retention"
                                            label="12个月后">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!-- 社群月留存率柱图 -->
                    <div class="report-container">
                        <el-section-pannel title="社群月留存率" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="wechatRetainMonthReportService_zhu_month"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="来源月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="wechatRetainMonthReportService_zhu" :options="wechatRetainMonthReportService_zhu" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--平台日活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="平台日活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="systemActiveDayReportService_dayRange"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="systemActiveDayReportService"
                                             :options="systemActiveDayReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--平台月活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="平台月活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="systemActiveMonthReportService_monthStart"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="起始月份">
                                </el-date-picker>
                                <el-date-picker
                                        v-model="systemActiveMonthReportService_monthEnd"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="截止月份">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="systemActiveMonthReportService"
                                             :options="systemActiveMonthReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--社群日活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="社群日活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="wechatActiveDayReportService_dayRange"
                                        type="daterange"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="wechatActiveDayReportService"
                                             :options="wechatActiveDayReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>
                    <!--社群月活跃表PV，UV-->
                    <div class="report-container">
                        <el-section-pannel title="社群月活跃表PV，UV" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="wechatActiveMonthReportService_monthStart"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="起始月份">
                                </el-date-picker>
                                <el-date-picker
                                        v-model="wechatActiveMonthReportService_monthEnd"
                                        type="month"
                                        format="yyyy-MM"
                                        value-format="yyyyMM"
                                        placeholder="截止月份">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="wechatActiveMonthReportService"
                                             :options="wechatActiveMonthReportService"/>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>


                </div>
            </div>
        </div>
    </el-admin-menu>
</div>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')

  /**
   * 得到请求链接
   * @param prefix
   * @param path
   */
  function makePath (prefix, path) {
    var reg = new RegExp(/((\.\w+){2}$)/)
    reg.test(window.location.hostname)
    if (path.indexOf('/') !== 0) {
      path = '/' + path
    }
    return window.location.protocol + '//' + prefix + RegExp.$1 + path
  }

  /**
   * 生成折线图的options对象
   * @param title
   */
  function makeOptions (title, options) {
    options.title = {
      text: title
    }
    options.tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    }
    options.backgroundColor = 'rgb(255,255,255)'
    options.toolbox = {
      feature: {
        saveAsImage: {
          title:' '
        }
      }
    }
    options.grid = {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
    return options
  }

  /**
   * 初始化options对象
   * 后面有写相同属性就把这里的覆盖
   */
  function extendOptions (options) {
    var init_options = {
      backgroundColor: 'rgb(255,255,255)',
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox:{
        feature: {
          saveAsImage: {
            title:' '
          }
        }
      }
    }
    $.extend(init_options, options);
    return init_options;
  }
</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<!-- <script src="./lib/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

<!-- 公众号月留存率 -->
<script>
  var publicRetainMonthReportServiceMixins = {
    data:function(){
      return {
        publicRetainMonthReportService:[],
        publicRetainMonthReportService_date: null,
        monthStart: '201801',
        monthEnd: '201901'
      }
    },
    methods:{
      //数据处理
      publicRetainMonthReportServiceHandle:function(list){
        if(list&&list.length>0){
          var arr = list.map(function (item) {
            var arr_sub = item.dataList.map(function (el) {
              if(el.retention>0){
                el.retention = (el.retention*100).toFixed(0) + '%';
              }else{
                el.retention = '--'
              }
              return el
            })
            item.dataList = arr_sub;
            return item
          })
          return arr;
        }
      },
      publicRetainMonthReportServiceFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('report', '/publicRetainMonthReportService'), {
          monthStart:that.monthStart,
          monthEnd:that.monthEnd,
        },function(resp){
          var list = resp.data.reportList||[];
          that.publicRetainMonthReportService = that.publicRetainMonthReportServiceHandle(list);
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.publicRetainMonthReportServiceFetch()
    },
    watch:{
      publicRetainMonthReportService_date:function(val) {
        this.monthStart = val[0];
        this.monthEnd = val[1];
        this.publicRetainMonthReportServiceFetch();
      },
      monthStart:function (val) {
        this.monthStart = val;
        this.publicRetainMonthReportServiceFetch();
      },
      monthEnd:function (val) {
        this.monthEnd = val;
        this.publicRetainMonthReportServiceFetch();
      },
    }
  }
</script>

<!-- 公众号月留存率柱图 -->
<script>
  var publicRetainMonthReportService_zhuMixins = {
    data:function(){
      return {
        publicRetainMonthReportService_zhu:null,
        publicRetainMonthReportService_zhu_month:'201805'
      }
    },
    methods:{
      publicRetainMonthReportService_zhuHandle:function(list){
        if(list&&list.length>0){
          var arr = list.map(function (item) {

            return item;
          })
          return list;
        }
      },
      publicRetainMonthReportService_zhuFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('report', '/publicRetainMonthReportService'), {
          monthStart: that.publicRetainMonthReportService_zhu_month,
          monthEnd: that.publicRetainMonthReportService_zhu_month
        },function(resp){
          var list = resp.data.reportList[0].dataList||[];
          that.publicRetainMonthReportService_zhu = extendOptions(
            {
              title: {
                text: '公众号月留存率(%)'
              },
              color: ['#FB7171'],
              xAxis : [
                {
                  type : 'category',
                  data : list.map(function (item) {
                    return item.monthNo
                  }),
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              yAxis : {
                type : 'value'
              },
              series : [
                {
                  label: {
                    normal: {
                      show: true,
                      position: 'top'
                    }
                  },
                  name:'留存率',
                  type:'bar',
                  barWidth: '60%',
                  data:list.map(function (item) {
                    return (item.retention*100).toFixed(0)
                  })
                }
              ]
            }
          )
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.publicRetainMonthReportService_zhuFetch()
    },
    watch:{
      publicRetainMonthReportService_zhu_month:function(val) {
        this.publicRetainMonthReportService_zhuFetch()
      }
    }
  }
</script>

<!-- 平台日活跃表PV，UV -->
<script>
  var systemActiveDayReportServiceMixins = {
    data:function(){
      return {
        systemActiveDayReportService:null,
        systemActiveDayReportService_dayRange:[]
      }
    },
    methods:{
      systemActiveDayReportServiceFetch:function(){
        var that = this
        that.$refs.systemActiveDayReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/systemActiveDayReportService'), {
          dayStart:that.systemActiveDayReportService_dayStart,
          dayEnd:that.systemActiveDayReportService_dayEnd
        },function(resp){
          var list = resp.data.reportList||[];
          that.systemActiveDayReportService = makeOptions("平台日活跃表PV，UV",{
            legend: {
              data: ['PV', 'UV']
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: list.map(function (item) {return item.day})
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series:[
              {
                name:'PV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.pv})
              },
              {
                name:'UV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.uv})
              }
            ]
          })
          that.$refs.systemActiveDayReportService.hideLoading()
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.systemActiveDayReportServiceFetch()
    },
    computed:{
      systemActiveDayReportService_dayStart:function(){
        if (this.systemActiveDayReportService_dayRange && this.systemActiveDayReportService_dayRange.length > 0) {
          return this.systemActiveDayReportService_dayRange[0]
        }
        return null
      },
      systemActiveDayReportService_dayEnd:function(){
        if (this.systemActiveDayReportService_dayRange && this.systemActiveDayReportService_dayRange.length > 1) {
          return this.systemActiveDayReportService_dayRange[1]
        }
        return null
      }
    },
    watch:{
      systemActiveDayReportService_dayRange:function(val){
        this.systemActiveDayReportServiceFetch()
      }
    }
  }
</script>

<!-- 平台月活跃表PV，UV -->
<script>
  var systemActiveMonthReportServiceMixins = {
    data:function(){
      return {
        systemActiveMonthReportService:null,
        systemActiveMonthReportService_monthStart:'',
        systemActiveMonthReportService_monthEnd:''
      }
    },
    methods:{
      systemActiveMonthReportServiceFetch:function(){
        var that = this
        that.$refs.systemActiveMonthReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/systemActiveMonthReportService'), {
          monthStart:that.systemActiveMonthReportService_monthStart,
          monthEnd:that.systemActiveMonthReportService_monthEnd
        },function(resp){
          var list = resp.data.reportList||[];
          that.systemActiveMonthReportService = makeOptions("平台月活跃表PV，UV",{
            legend: {
              data: ['PV', 'UV']
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: list.map(function (item) {return item.month})
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series:[
              {
                name:'PV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.pv})
              },
              {
                name:'UV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.uv})
              }
            ]
          })
          that.$refs.systemActiveMonthReportService.hideLoading()
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.systemActiveMonthReportServiceFetch()
    },
    watch:{
      systemActiveMonthReportService_monthStart:function(val){
        this.systemActiveMonthReportServiceFetch()
      },
      systemActiveMonthReportService_monthEnd:function(val){
        this.systemActiveMonthReportServiceFetch()
      }
    }
  }
</script>

<!-- 社群日活跃表PV，UV -->
<script>
  var wechatActiveDayReportServiceMixins = {
    data:function(){
      return {
        wechatActiveDayReportService:null,
        wechatActiveDayReportService_dayRange:[]
      }
    },
    methods:{
      wechatActiveDayReportServiceFetch:function(){
        var that = this
        that.$refs.wechatActiveDayReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/wechatActiveDayReportService'), {
          dayStart:that.wechatActiveDayReportService_dayStart,
          dayEnd:that.wechatActiveDayReportService_dayEnd
        },function(resp){
          var list = resp.data.reportList||[];
          that.wechatActiveDayReportService = makeOptions("社群日活跃表PV，UV",{
            legend: {
              data: ['PV', 'UV']
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: list.map(function (item) {return item.day})
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series:[
              {
                name:'PV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.pv})
              },
              {
                name:'UV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.uv})
              }
            ]
          })
          that.$refs.wechatActiveDayReportService.hideLoading()
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.wechatActiveDayReportServiceFetch()
    },
    computed:{
      wechatActiveDayReportService_dayStart:function(){
        if(this.wechatActiveDayReportService_dayRange && this.wechatActiveDayReportService_dayRange.length > 0){
          return this.wechatActiveDayReportService_dayRange[0]
        }
        return null;
      },
      wechatActiveDayReportService_dayEnd:function(){
        if(this.wechatActiveDayReportService_dayRange && this.wechatActiveDayReportService_dayRange.length > 1){
          return this.wechatActiveDayReportService_dayRange[1]
        }
        return null;
      }
    },
    watch:{
      wechatActiveDayReportService_dayRange:function(val){
        this.wechatActiveDayReportServiceFetch()
      }
    }
  }
</script>
<!-- 社群月活跃表PV，UV -->
<script>
  var wechatActiveMonthReportServiceMixins = {
    data:function(){
      return {
        wechatActiveMonthReportService:null,
        wechatActiveMonthReportService_monthStart:'',
        wechatActiveMonthReportService_monthEnd:''
      }
    },
    methods:{
      wechatActiveMonthReportServiceFetch:function(){
        var that = this
        that.$refs.wechatActiveMonthReportService.showLoading()
        $.base.sendHttpRequest(makePath('report', '/wechatActiveMonthReportService'), {
          monthStart:that.systemActiveMonthReportService_monthStart,
          monthEnd:that.systemActiveMonthReportService_monthEnd
        },function(resp){
          var list = resp.data.reportList||[];
          that.wechatActiveMonthReportService = makeOptions("社群月活跃表PV，UV",{
            legend: {
              data: ['PV', 'UV']
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: list.map(function (item) {return item.month})
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series:[
              {
                name:'PV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.pv})
              },
              {
                name:'UV',
                type:'line',
                areaStyle:{},
                data:list.map(function (item) {return item.uv})
              }
            ]
          })
          that.$refs.wechatActiveMonthReportService.hideLoading()
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.wechatActiveMonthReportServiceFetch()
    },
    watch:{
      wechatActiveMonthReportService_monthStart:function(val){
        this.wechatActiveMonthReportServiceFetch()
      },
      wechatActiveMonthReportService_monthEnd:function(val){
        this.wechatActiveMonthReportServiceFetch()
      }
    }
  }
</script>

<!--社群月留存率-->
<script>
  var wechatRetainMonthReportServiceMixins = {
    data:function(){
      return {
        wechatRetainMonthReportService: null,
        wechatRetainMonthReportService_monthStart: '201801',
        wechatRetainMonthReportService_monthEnd: '201901',
      }
    },
    methods:{
      //数据处理
      wechatRetainMonthReportServiceHandle:function(list){
        if(list&&list.length>0){
          var arr = list.map(function (item) {
            var arr_sub = item.dataList.map(function (el) {
              if(el.retention>0){
                el.retention = (el.retention*100).toFixed(0) + '%';
              }else{
                el.retention = '--'
              }
              return el
            })
            item.dataList = arr_sub;
            return item
          })
          return arr;
        }
      },
      wechatRetainMonthReportServiceFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/wechatRetainMonthReportService'), {
            monthStart: that.wechatRetainMonthReportService_monthStart,
            monthEnd: that.wechatRetainMonthReportService_monthEnd,
          },
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.wechatRetainMonthReportService = that.wechatRetainMonthReportServiceHandle(list);
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.wechatRetainMonthReportServiceFetch();
    },
    watch:{
      wechatRetainMonthReportService_date:function(val){
        console.log(val);
        this.wechatRetainMonthReportService_date = val;
        this.wechatRetainMonthReportServiceFetch();
      },
      wechatRetainMonthReportService_monthStart:function () {
        this.wechatRetainMonthReportServiceFetch();
      },
      wechatRetainMonthReportService_monthEnd:function () {
        this.wechatRetainMonthReportServiceFetch();
      },
    }
  }
</script>

<!-- 社群月留存率柱图 -->
<script>
  var wechatRetainMonthReportService_zhuMixins = {
    data:function(){
      return {
        wechatRetainMonthReportService_zhu:null,
        wechatRetainMonthReportService_zhu_month:'201805'
      }
    },
    methods:{
      wechatRetainMonthReportService_zhuFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('report', '/wechatRetainMonthReportService'), {
          monthStart: that.wechatRetainMonthReportService_zhu_month,
          monthEnd: that.wechatRetainMonthReportService_zhu_month
        },function(resp){
          var list = resp.data.reportList[0].dataList||[];
          that.wechatRetainMonthReportService_zhu = extendOptions(
            {
              title: {
                text: '社群月留存率(%)'
              },
              color: ['#FB7171'],
              xAxis : [
                {
                  type : 'category',
                  data : list.map(function (item) {
                    return item.monthNo
                  }),
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              yAxis : {
                type : 'value'
              },
              series : [
                {
                  label: {
                    normal: {
                      show: true,
                      position: 'top'
                    }
                  },
                  name:'留存率',
                  type:'bar',
                  barWidth: '60%',
                  data:list.map(function (item) {
                    return (item.retention*100).toFixed(0)
                  })
                }
              ]
            }
          )
        },function(complete){},function(error){} )
      }
    },
    mounted:function(){
      this.wechatRetainMonthReportService_zhuFetch()
    },
    watch:{
      wechatRetainMonthReportService_zhu_month:function(val) {
        this.wechatRetainMonthReportService_zhuFetch()
      }
    }
  }
</script>

<script>
  Vue.component('v-chart', VueECharts)
  new Vue({
    el: '#app',
    mixins: [
      $.base.globalMixin,
      publicRetainMonthReportServiceMixins,
      systemActiveDayReportServiceMixins,
      systemActiveMonthReportServiceMixins,
      wechatActiveDayReportServiceMixins,
      wechatActiveMonthReportServiceMixins,
      wechatRetainMonthReportServiceMixins,
      publicRetainMonthReportService_zhuMixins,
      wechatRetainMonthReportService_zhuMixins
    ],
    data: function () {
      return {
        username: '',
        enterDate: '',
        visible: false,
        // 来自test_data.js
        menus: [],
        // 来自test_data.js
        userDetail: {},
        initOptions: {},
        runningAreaList:[]
      }
    },
    created(){
      this.getRunningAreaFetch()
    },
    methods: {
      getRunningAreaFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('basic','/getRunningArea'), {},
          function(resp){
            that.runningAreaList = resp.data.runningAreaList
          },
          function(complete){},
          function(error){}
        )
      },
      logout:function() {
        window.location.href = 'login.html'
      }
    },
    mounted:function() {
      document.querySelector('body').style.display = 'block'
    }
  })
</script>
</body>
</html>